<template>
<!-- v-loading="!singers.length" 页面没有获取到数据的时候显示动画效果 -->
  <div class="singer" v-loading="!singers.length">
    <!--  :data='singers' 数据传给子组件 -->
    <index-list :data='singers' @select="selectSinger"></index-list>
    <!-- <router-view :singer='selectSing'></router-view> -->
    <!-- 过度动画效果 -->
    <router-view v-slot="{ Component }">
      <transition  name="slide">
        <component :is="Component" :singer="selectSing" />
      </transition>
    </router-view>
  </div>
</template>

<script>
import { getSingerList } from '../service/singer'
import IndexList from '../components/base/index-list/index-list.vue'
import storage from 'good-storage'
import { SINGER_KEY } from '../assets/js/constant'
export default {
  name: 'singer',
  components: {
    IndexList
  },
  data() {
    return {
      singers: [],
      selectSing: null
    }
  },
  methods: {
    selectSinger(singer) {
      this.selectSing = singer // 获取到歌手的id
      this.cacheSinger(singer)
     this.$router.push({
      path: `/singer/${singer.mid}`
     })
    },
    cacheSinger(singer) { // 存储歌手信息 歌手详情页面刷新不报错 本地存储session
      storage.session.set(SINGER_KEY, singer)
    }
  },
  async created() {
    const result = await getSingerList()
    this.singers = result.singers
  }
}
</script>
<style lang="scss" scoped>
  .singer {
    position: fixed;
    width: 100%;
    top: 88px;
    bottom: 0;
  }
</style>
